<script setup lang="ts">
import Footer from '../../components/Footer.vue'
</script>

<template>
  <div class="h-screen w-full overflow-hidden bg-black page-background">
    <div class=" w-full h-[6.91vh] absolute">
      <img class="ml-[1.66vw] h-full w-[20vw]" src="../../assets/logo-white.png" />
    </div>
    <div class="relative z-10 text-left max-w-3xl px-10 ml-[6.94vw] mt-[35.06vh]">
      <h1 class="text-[52px] text-white/95 mb-8 font-semibold tracking-wider">相干光量子计算机体验平台</h1>
      <p class="text-[18px] leading-[1.81vw] text-white/70 mb-[3.95vh] max-w-[45.98vw]">550量子比特相干光量子计算机在国内首次实现550节点全连接可编程Max-Cut问题相干光量子计算求解，能在几个毫秒内在庞大的解空间中进行并行搜索，求出优化解。实现了比经典计算在实际应用问题上的数万倍加速!</p>
      <button 
        class="h-14 bg-[#1CC9BE] px-11 py-4.5 text-lg text-white rounded-lg cursor-pointer transition-all duration-300 hover:ring-4 hover:ring-[#0FB9AD]/50 shadow-[0_0_20px_rgba(0,227,183,0.3)]"
        @click="$router.push('/quantum')"
      >
        开始探索
      </button>
    </div>
    <!-- <div class="absolute inset-0 z-0">
      <div class="absolute w-10 h-[150%] opacity-15 skew-x-[-30deg] animate-beam-move filter blur-sm bg-gradient-to-r from-transparent via-[#2d7fea] to-transparent left-[20%] animation-delay-[-3s]"></div>
      <div class="absolute w-10 h-[150%] opacity-15 skew-x-[-30deg] animate-beam-move filter blur-sm bg-gradient-to-r from-transparent via-[#ff7b00] to-transparent left-[50%] animation-delay-[-6s]"></div>
      <div class="absolute w-10 h-[150%] opacity-15 skew-x-[-30deg] animate-beam-move filter blur-sm bg-gradient-to-r from-transparent via-[#2d7fea] to-transparent left-[80%] animation-delay-[-9s]"></div>
    </div> -->
    <Footer />
  </div>
</template>

<style lang="scss">
.page-background {
  background-image: url('../../assets/bacl.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>